<%--
  Created by IntelliJ IDEA.
  User: 14811
  Date: 2022-5-1
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/common.jsp"%>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/common.css">
    <link rel="stylesheet" href="<%=path%>/css/register.css">
    <script type="text/javascript">
        function isUserNameExists() {
            var username = $("#username").val()
            if (username!=null&&username!==""){
                $.ajax({
                    url : "<%=path%>/registerController/isUserNameExists",
                    dataType : "json",
                    type : "post",
                    data : {username:username},
                    async : true,
                    success : function (data) {
                        if (data==1){
                            toastr.error("用户名重复")
                        }else {
                            toastr.success("用户名可用")
                        }

                    },
                    error : function (e) {
                        console.log(e);
                        toastr.error("系统错误")
                    }
                })
            }else {
                toastr.error("用户名为空")
            }


            // alert(username)
        }
        function register() {
            $.ajax({
                url : "<%=path%>/registerController/register",
                dataType : "json",
                type : "post",
                data : $("#registerForm").serialize(),
                async : true,
                success : function (data) {
                    if (data==1){
                        toastr.success("注册成功")
                        location.href = "<%=path%>/pageController/toLogin"
                    }else if (data==0){
                        toastr.error("验证码错误")
                    }

                },
                error : function (e) {
                    console.log(e);
                    toastr.error("验证错误")
                }
            })
        }
    </script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
            <!--注册表单-->
            <form id="registerForm">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="register">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" name="username" placeholder="请输入用户名" onblur="isUserNameExists()">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="password" name="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="email">Email</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="email" name="email" placeholder="请输入Email">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="name" name="name" placeholder="请输入真实姓名">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="phone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="phone" name="phone" placeholder="请输入您的手机号">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="sex">性别</label>
                        </td>
                        <td class="td_right gender">
                            <input type="radio" id="sex" name="sex" value="1" checked> 男
                            <input type="radio" name="sex" value="0"> 女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="check">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" id="check" name="check" class="check">
                            <a href="javascript:refreshCode_register(this);" style="margin-left: 10px" >
                                <img src="${pageContext.request.contextPath}/loginController/checkCode" id="vcode" height="32px" alt="">
                            </a>
                            <script type="text/javascript">
                                //图片点击事件
                                function refreshCode_register(){
                                    //1.获取验证码图片对象
                                    var vcode = document.getElementById("vcode");

                                    //2.设置其src属性，加时间戳
                                    vcode.src = "${pageContext.request.contextPath}/loginController/checkCode?time="+new Date().getTime();
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input type="button" class="submit" value="注册" onclick="register()">
                            <span id="msg" style="color: red;"></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号？
                <a href="${pageContext.request.contextPath}/pageController/toLogin">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->

</body>
</html>
